<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        p {
            height: 40px;
            line-height: 40px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <!-- HTML属性的属性名只能是小写,如果写成大写会自动转化为小写 -->

    <div id="app">
        <!-- 普通内联样式写法 (静态属性) -->
        <p class="one" style="width:100px;height:100px;background-color:red;font-size:20px;text-align:center;line-height:100px">01</p>

        <!-- style绑定和字符串 -->
        <p class="one" :style="styleStr">02</p>


        <!-- style绑定和 对象 -->
        <p class="one" :style="styleObj">03</p>


         <!-- style绑定和 数组对象 -->
         <p class="one" :style="styleList">04</p>


        <button @click="isActive = !isActive>isActive">change</button>
        <p class="one" :style="{...styleObj,backgroundColor:isActive?'red':'grey'}">05</p>
        <p class="one" :style="[...styleList,{backgroundColor:isActive?'red':'grey'}]">06</p>
     
    </div>
</body>
<script>

    /* 
        v-bind和class绑定 style绑定
            1. 一般情况下, v-bind将data中挂载的数据,作为html属性的属性值时 属性值只能是字符串类型(如果指令的值不是字符串类型, 会隐式转化为字符串(xxx.toString()))
            2. 在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
    */


    // var obj = {
    //     a:1,
    //     b: obj.a + 1
    // }

   

    var vm = new Vue({
        el: "#app",
        data: {
            isActive: true,

            styleStr:"width:100px;height:100px;background-color:grey;font-size:20px;text-align:center;line-height:100px",

            styleObj:{
                width:"100px",
                height:"100px",
                backgroundColor:"grey",
                fontSize:"20px",
                textAlign:"center",
                lineHeight:"100px",
            },

            styleList:[{
                width:"100px",
                height:"100px",
            },{
                backgroundColor:"grey",
            },{
                fontSize:"20px",
                textAlign:"center",
                lineHeight:"100px",
            }]
        },

    })

</script>

<script>
    /* 
        1. 数组常见方法
          a. 修改原数组的
          b. 不修改原数组
          c. 数组的遍历方法

        2. 数组排序 

        3. 数组去重  
    
    
    */














</script>
</html>